<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新建</title>
<meta name="description" content="whit">
<meta name="keywords" content="whit">
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrapValidator/bootstrapValidator.css">
</head>

<script>
     
</script>

<body>
	<section class="content-header">
		<h1>
			投票管理 <small>新建</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
			<li><a href="#">新建</a></li>
			<li class="active">投票管理</li>
		</ol>
	</section>

	<section class="content">
		<div class="row">
			<div class="col-md-12">
				<div class="box box-warning">
					<!-- /.box-header -->
					<div class="box-body">
						<form id="myform" action="${pageContext.request.contextPath}/VoteServlet?method=add" method="post">
							<!-- text input -->
							<div class="form-group">
								<label>投票标题</label> <input type="text" class="form-control" placeholder="请输入投票标题" name="title">
								<span class="form-control-feedback"></span>
							</div>
							
							<!-- Date and time range -->
							<div class="form-group">
								<label>投票开始和结束时间:</label>
								<div class="input-group">
									<div class="input-group-addon">
										<i class="fa fa-clock-o"></i>
									</div>
									<input type="text" class="form-control pull-right" readonly="readonly" id="reservationtime">
									<input type="hidden" id="startTime" name="startTime">
									<input type="hidden" id="endTime" name="endTime">
								</div>
							</div>
							<!-- textarea -->
							<div class="form-group">
								<label>内容</label>
								<textarea id="editor1" name="content" class="form-control" rows="3" placeholder="描述信息 ..."></textarea>
							</div>

							
							<div class="form-group">
								<label>投票选项设置</label>
								<div class="input-group" style="margin: 2px;">
	                                <span class="input-group-addon">1</span>
	                                <input type="text" name="options" class="form-control" placeholder="请输入选项1内容">
	                                <span class="input-group-addon"><i class="fa fa-remove" onclick="removeItem(this)"></i></span>
	                            </div>
	                            <div class="input-group" style="margin: 2px;">
	                                <span class="input-group-addon">2</span>
	                                <input type="text" name="options" class="form-control" placeholder="请输入选项2内容">
	                                <span class="input-group-addon"><i class="fa fa-remove" onclick="removeItem(this)"></i></span>
	                            </div>
	                            <div class="input-group" style="margin: 2px;">
	                                <span class="input-group-addon">3</span>
	                                <input type="text" name="options" class="form-control" placeholder="请输入选项3内容">
	                                <span class="input-group-addon"><i class="fa fa-remove" onclick="removeItem(this)"></i></span>
	                            </div>
							</div>
							<div class="input-group" style="margin: 0px;">
                            	<button type="button" onclick="addOption(this);return false;" class="btn pull-right">增加选项</button>
                            </div>
							<div class="box-footer">
                                 <button type="button"   onclick="return false;" class="btn btn-default">返回</button>
                                 <button type="submit" onclick="return checkForm()"   class="btn btn-primary pull-right">保存</button>
                             </div>	
		
						</form>
					</div>
				</div>

			</div>
		</div>
	</section>
	
	<section class="content">
	 
	</section>
	<script
		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrapValidator/bootstrapValidator.js"></script>
	<script>
		
		function checkForm(){
			 
			var flag = true;
			//投票的各个选项必须有值
			$.each($("input[name='options']"),function(index,item){
				if($(item).val() == '' || $(item).val().trim() == ''){
					alert('投票选择的值不能为空');
					flag = false;
					return false;
				}
			}) 
			//必须选择开始和结束日期时间
			if( $("#startTime").val() == '' ||  $("#endTime").val() == ''){
				alert('请选择投票开始和结束的时间');
				flag = false;
			}
			return flag;
			
		}
	
		function addOption(event){
			//增加投票选择条目
			var addBtn = $(event);
			var containerE = addBtn.parent().prev();
			//最多20个选项
			if(containerE.children("div").length >=20){
				alert("选项最多20个");
				return;
			}
			var lastOption = containerE.children(":last-child");
			var ordNum = lastOption.children(":first-child").text();
			var newNum = parseInt(ordNum) + 1;
			var newOption = lastOption.clone();
			newOption.children(":first-child").text(newNum);
			newOption.children().eq(1).attr('placeholder','请输入选项' + newNum +'内容');
			newOption.children().eq(1).val("");
			//克隆，加入成为最后一个选项
			containerE.append(newOption);
		}

		function removeItem(event){
			var removeBtn = $(event);
			var removeOption = removeBtn.parent().parent();
			var containerE = removeOption.parent();
			//如果选项个数少于2，则不可以删除
			if(containerE.children("div").length <= 2){
				alert("选项至少2个");
				return;
			}
			
			//获取删除元素的所有兄弟节点
			var nextOptions = removeOption.nextAll();
			//遍历后续兄弟选项节点，修改序号和显示的文本
			$.each(nextOptions,function(index,item){
				var ordNum = $(item).children(":first-child").text();
				var newNum = parseInt(ordNum) - 1;
				$(item).children(":first-child").text(newNum);
				$(item).children().eq(1).attr('placeholder','请输入选项' + newNum +'内容');
			})
			//删除该选项
			removeOption.remove();

		}
	
		$(document).ready(function() {
			// 选择框
			$(".select2").select2();

			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale : 'zh-CN'
			});
		});

		// 设置激活菜单
		function setSidebarActive(tagUri) {
			var liObj = $("#" + tagUri);
			if (liObj.length > 0) {
				liObj.parent().parent().addClass("active");
				liObj.addClass("active");
			}
		}

		$(document).ready(function() {

			// 颜色选取器
			$(".my-colorpicker1").colorpicker();
			$(".my-colorpicker2").colorpicker();

		});

		$(document).ready(function() {
			// 选择框
			$(".select2").select2();
		});

		$(document).ready(
				function() {
					//Date range picker with time picker
					$('#reservationtime').daterangepicker({
						timePicker : true,
						timePickerIncrement : 30,
						format : 'YYYY/MM/DD',
						locale : {
							applyLabel : '确认',
							cancelLabel : '取消',
							fromLabel : '起始时间',
							toLabel : '结束时间',
							customRangeLabel : '自定义',
							firstDay : 1
						},
						opens : 'right', // 日期选择框的弹出位置
						separator : ' 至 '
					}).on('cancel.daterangepicker', function(ev, picker) {  
				          $("#reservationtime").val("请选择日期范围");  
				          $("#startTime").val("");  
				          $("#endTime").val("");  
				      }).on('apply.daterangepicker', function(ev, picker) {  
				          $("#startTime").val(picker.startDate.format('YYYY-MM-DD hh:mm:ss'));  
				          $("#endTime").val(picker.endDate.format('YYYY-MM-DD hh:mm:ss'));  
				          $("#reservationtime").val(picker.startDate.format('YYYY-MM-DD hh:mm')+" 至 "+picker.endDate.format('YYYY-MM-DD hh:mm'));   
				  });

				}
		);

		$(document).ready(function() {

			/*table tree*/
			$("#collapse-table").treetable({
				expandable : true
			});

		});

		$(document).ready(function() {

			CKEDITOR.replace('editor1');

			// $(".textarea").wysihtml5({
			//     locale:'zh-CN'
			// });

			$("#markdown-textarea").markdown({
				language : 'zh',
				autofocus : false,
				savable : false
			});


			//此处为校验的核心代码
			$("#myform").bootstrapValidator({
				submitHandler : function(valiadtor, loginForm, submitButton) {
					valiadtor.defaultSubmit();
				},
				fields : {
					title : {
						validators : {
							notEmpty : {
								message : '不能为空'
							},
							stringLength : {
								/*长度提示*/
								min : 4,
								max : 50,
								message : '长度必须在4到50之间'
							}
						}
					} 
				}
			});
			

		});

		$(document).ready(function() {

			// 激活导航位置
			setSidebarActive("admin-dataform");

		});
	</script>
</body>
</html>